<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar :title="title" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="top">
      <div>
        <p style="font-weight:bold">可用余额({{title}})</p>
        <P style="color:#D1A568">{{allMoney}}</P>
      </div>
      <div>
        <span @click="recharge">确认充值</span>
      </div>
    </div>

    <div class="pay-list">
      <div class="pay-list-title">交易记录</div>
      <!-- 无交易记录 -->
      <div class="no-pay" v-show="false">
        <p>暂无交易记录</p>
        <span>立即充币</span>
      </div>
      <!-- 记录内容 -->
      <div class="contain" v-for="(item,index) in dealList" :key="index">
        <div class="contain-list" v-if="item.type==6?false:true">
          <div>
            <span>
              <img style="width:100%" src="../../../assets/images/icon-out.png" alt>
            </span>
          </div>
          <div>
            <p>
              <span>{{item.record_name}}</span>
              <span>+{{item.turnover_amount}}</span>
            </p>
            <p>
              <span>{{item.create_time}}</span>
              <span></span>
            </p>
          </div>
        </div>
        <div class="contain-list" v-else>
          <div>
            <span style="color:#D1A568">
              <img style="width:100%" src="../../../assets/images/icon-enter.png" alt>
            </span>
          </div>
          <div>
            <p>
              <span>{{item.record_name}}</span>
              <span style="color:#D1A568">-{{item.turnover_amount}}</span>
            </p>
            <p>
              <span>{{item.create_time}}</span>
              <span style="color:#D1A568"></span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <p v-show="flagbtm" style="font-size:10px;color:#ccc;margin-top:10px;margin-bottom:80px;">没有了！！！</p>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar } from "vant";
import { PullRefresh, List } from "vant";
Vue.use(PullRefresh).use(List);

import axios from "axios";
import { recordList, coinAssets ,rechargeCompleted} from "../../../axios/api.js";
export default {
  data() {
    return {
      allMoney: "",
      list: [],
      loading: false,
      finished: false,
      dealList: [],
      title: "",
      downNum: "1",
      nowId: "",
      flagbtm: false
    };
  },
  created() {
    this.nowId = this.$route.params.id;
    console.log(this.nowId);
    this.title = this.$route.params.title;
    this.getRrecordList();
    this.getLostMoney();
    this.dowmUp();
  },
  watch: {
    //监听路由变化刷新数据
    $route(to, from) {
      if (this.$route.params.id) {
        // 判断条件1  判断传递值的变化
        this.getRrecordList();
        this.title = this.$route.params.title;
        this.getLostMoney();
        this.nowId = this.$route.params.id;
        console.log(this.nowId);
        this.downNum = 1;
        this.flagbtm = false;
        //console.log(this.$route, 123);
      }
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List
  },
  methods: {
    //返回
    goBack() {
      this.$router.go(-1);
    },

    //交易记录
    getRrecordList() {
      var getParams = {
        token: sessionStorage.getItem("token"),
        page: this.downNum,
        rows: 10,
        virtualWalletId: this.$route.params.id
      };
      recordList({
        params: getParams
      }).then(res => {
        console.log(res.data.data, 8888);
        this.dealList = res.data.data;
        //console.log(this.dealList,99999)
      });
    },

    //获取余额
    getLostMoney() {
      var getCoins = {
        token: sessionStorage.getItem("token"),
        virtualWalletId: this.$route.params.id
      };
      coinAssets({
        params: getCoins
      }).then(res => {
        if (res.data.data == null) {
          this.allMoney = 0;
        } else {
          this.allMoney = res.data.data.coinAssetc;
        }
      });
    },

    // 确认充值
    recharge(){
      var pay = {
        coinTradeId:""
      };
      rechargeCompleted({
        params:pay
      }).then(res =>{
        console.log(res.data.data,99999)
        if(res.data.code == 200){
           this.$toast(res.data.msg)
        }
      })

    },

    //分页
    dowmUp() {
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.downNum++;
            var getParams = {
              token: sessionStorage.getItem("token"),
              page: that.downNum,
              rows: 10,
              virtualWalletId: that.nowId
            };
            console.log(getParams);
            recordList({
              params: getParams
            }).then(res => {
              console.log(res.data.data, 8888);
              var newDd = res.data.data;

              for (var i in newDd) {
                that.dealList.push(newDd[i]);
              }
              console.log(that.dealList, 99999);
              if (res.data.data.length == 0) {
                that.flagbtm = true;
              } else {
                that.flagbtm = false;
              }
            });
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.top {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > div {
    width: 50%;
    font-size: 14px;
    padding: 0 20px;
    box-sizing: border-box;
    p {
      text-align: left;
    }
  }
  > div:nth-child(1) {
    p:nth-child(1) {
      margin-bottom: 4px;
    }
  }
  > div:nth-child(2) {
    text-align: right;
    color: #d1a568;
    span {
      display: inline-block;
      width: 80px;
      height: 25px;
      border: 1px solid #d1a568;
      text-align: center;
      line-height: 25px;
    }
  }
}

// 交易列表
.pay-list {
  border-top: 10px solid #f6f6f8;
  .pay-list-title {
    height: 45px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .no-pay {
    margin-top: 20vh;
    font-size: 14px;
    p {
      color: #999999;
    }
    > span {
      display: inline-block;
      width: 130px;
      height: 40px;
      border: 1px solid #d1a568;
      border-radius: 30px;
      color: #d1a568;
      text-align: center;
      line-height: 40px;
      margin-top: 6px;
    }
  }
}

// 交易内容
.contain {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .contain-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: red;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    > div:nth-child(1) {
      width: 5%;
      color: red;
    }
    > div:nth-child(2) {
      width: 95%;
      color: red;
      p:nth-child(1),
      p:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;
        box-sizing: border-box;
        font-size: 13px;
      }
      p:nth-child(1) {
        span:nth-child(1) {
          color: #333;
          font-weight: bold;
        }
      }
      p:nth-child(2) {
        margin-top: 4px;
        font-size: 10px;
        span:nth-child(1) {
          color: #999;
        }
      }
    }
  }
}
</style>
